<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="css/mui.min.css" rel="stylesheet" />
		<link rel="stylesheet" type="text/css" href="css/icons-extra.css" />
		<style type="text/css">
			ul {
				list-style: none;
				padding: 0px;
			}
			
			.mui-content {
				background: url(images/indexbg.png)no-repeat;
				background-size: 100%;
			}
			
			.sousuo {
				background: url(images/logo.png)no-repeat center 20px;
				background-size: 90%;
				padding: 23% 5% 0;
			}
			
			.sousuo .serch {
				background: white;
				margin: 0 auto;
				border-radius: 5px;
				height: 40px;
				line-height: 40px;
				padding-left: 10px;
			}
			
			.bar {
				background: white;
				border-radius: 5px;
				margin-top: 25px;
				padding: 10px;
				margin: 25px 5% 0;
			}
			
			.bar ul {
				display: flex;
				padding: 0;
				flex-flow: row wrap;
				margin: 0px;
				padding-top: 5px;
			}
			
			i {
				border-radius: 5px;
			}
			
			.bar li {
				display: flex;
				flex-flow: column nowrap;
				flex: 1 25%;
				align-items: center;
				padding: 10px 0 0;
				border-radius: 5px;
			}
			
			.bar li:active {
				background: #ECF8F6;
			}
			
			.bar li i {
				display: block;
				text-align: center;
				width: 60px;
				height: 60px;
				line-height: 60px;
				color: white;
				font-size: 40px;
			}
			
			.bar li:nth-of-type(1) i {
				background: #35A82F;
			}
			
			.bar li:nth-of-type(2) i {
				background: #23C8CA;
			}
			
			.bar li:nth-of-type(3) i {
				background: #FE9844;
			}
			
			.bar li:nth-of-type(4) i {
				background: #FFB911;
			}
			
			.bar li:nth-of-type(5) i {
				background: #9A59B5;
			}
			
			.bar li:nth-of-type(6) i {
				background: #EC5080;
			}
			
			.bar li:nth-of-type(7) i {
				background: #FFAEBA;
			}
			
			.bar li:nth-of-type(8) i {
				background: #39B791;
			}
			
			.bar p {
				text-align: center;
				padding: 5px 0;
				margin-bottom: 0px;
			}
			
			.content {
				background: white;
			}
			
			.content li:active {
				background: #eee;
			}
			
			.content ul {
				display: flex;
				margin-top: 20px;
				padding: 15px 0;
				justify-content: space-around;
			}
			
			.content ul li {
				display: flex;
				flex-flow: column;
				width: 90px;
				align-items: center;
				border-radius: 5px;
			}
			
			.content ul li i {
				width: 50px;
				height: 50px;
				text-align: center;
				line-height: 50px;
				font-size: 40px;
				color: #286BD4;
			}
			
			.content p {
				width: 70%;
				text-align: center;
				color: #000000;
				margin-bottom: 0px;
			}
			
			.list {
				padding: 0 5%;
				background: white;
				margin-top: 50px;
			}
			
			h6 {
				line-height: 40px;
				font-size: 16px;
				position: relative;
				text-indent: 10px;
				margin: 0;
				color: #000000;
			}
			
			h6:after {
				position: absolute;
				top: 25%;
				content: "";
				display: block;
				width: 5px;
				border-radius: 3px;
				height: 40%;
				background: #2167D1;
			}
			
			.card {
				border-radius: 5px;
				box-shadow: 0px 5px 5px rgba(72, 61, 139, .4);
			}
			
			.list ul {
				margin: 0 -15px;
			}
			
			.list li {}
		</style>
	</head>

	<body>
		<div class="mui-content" id="app">
			<div class="sousuo ">
				<div class="serch card">
					<i class="mui-icon mui-icon-search"></i>
					<span>请输入企业名称</span>
				</div>

			</div>
			<div class="bar card">
				<ul>
					<li class="" id="4028b88167abe7520167abebc0bb0001">
						<i class="mui-icon iconfont icon-gongyuan"></i>
						<p>公园</p>
					</li>

					<li class="" id="4028b88167abe7520167abebe6740002">
						<i class="mui-icon iconfont icon-youyongguan"></i>
						<p>游泳馆</p>
					</li>

					<li class="" id="4028b88167abe7520167abec0fdd0003">
						<i class="mui-icon iconfont icon-binguanjiudian1"></i>
						<p>宾馆</p>
					</li>

					<li class="" id="4028b88167abe7520167abec873b0004">
						<i class="mui-icon iconfont icon-tiyuchangguan"></i>
						<p>体院馆</p>
					</li>

					<li class="" id="4028b88167abe7520167abeca08a0005">
						<i class="mui-icon iconfont icon-bowuguan"></i>
						<p>博物馆</p>
					</li>

					<li class="" id="4028b88167abe7520167abecb9e20006">
						<i class="mui-icon iconfont icon-46"></i>
						<p>理发店</p>
					</li>

					<li class="" id="4028b88167abe7520167abecedfb0007">
						<i class="mui-icon iconfont icon-itemno_101"></i>
						<p>美容院</p>
					</li>

					<li class="" id="4028b88167abe7520167abed012d0008">
						<i class="mui-icon iconfont icon-tushuguan"></i>
						<p>图书馆</p>
					</li>

				</ul>
			</div>

			<!--<div class="content">
				<ul>
					<li id="0">
						<i class="mui-icon iconfont icon-xuke"></i>
						<p>企业许可<br />信息查询</p>
					</li>
					<li id="1">
						<i class="mui-icon iconfont icon-gongshigonggao"></i>
						<p>日常监督<br />结果公示</p>
					</li>
					<li id="2">
						<i class="mui-icon iconfont icon-hangzhengchufacopy"></i>
						<p>处罚<br />结果公示</p>
					</li>
				</ul>
			</div>-->
			<div class="list">
				<h6>最近动态</h6>
				<ul class="mui-table-view">
					<li :id="val.id" class="mui-table-view-cell" v-for="(val, index) of dongtai" :key="val.id">
						<a href="javascript:;" class="mui-navigate-right">
							<div class="mui-media-body mui-ellipsis">
								{{val.newsTitle}}
								
							</div>
						</a>
					</li>
				</ul>
			</div>
		</div>
	</body>

</html>
<script src="js/mui.min.js"></script>
<script src="js/vue.js"></script>
<script type="text/javascript">
	mui.init()
	mui.plusReady(function() {
		plus.webview.currentWebview().setStyle({
			scrollIndicator: 'none'
		});
	})

	var app = new Vue({
		el: "#app",
		data: {
			dongtai: [],
		}
	})
	mui("body").on('tap', '.sousuo', function() {
		tiao('serch');
	});
	mui(".bar").on('tap', 'li', function() {
		cun('KEY', this.id)
		tiao('list');
	});
	mui(".content").on('tap', 'li', function() {
		cun('LEI', this.id)
		tiao('list');
	});
	mui(".list").on('tap', 'li', function() {
		var id = this.getAttribute("id");
		cun('ID', id);
		tiao('dtxq');
	})

	mui.ajax(URL+'meCompanyUser!read', {
		
		dataType: 'json', //服务器返回json格式数据
		type: 'post', //HTTP请求类型
		timeout: 10000, //超时时间设置为10秒；
		success: function(data) {
			console.log(data);
			app.dongtai = data.data;
		},
		error: function(xhr, type, errorThrown) {
			console.log(type);
		}
	});
</script>